<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button size="mini" type="primary" @click="showAddDialogFn">添加分类</el-button>
      </div>
      <el-table style="width: 100%" border stripe :data="cateList">
              <el-table-column label="序号" width="100" prop="id"></el-table-column>
              <el-table-column label="分类名称" prop="cate_name"></el-table-column>
              <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
              <el-table-column label="操作">
                <template v-slot="scope">
                  <el-button type="primary" size="mini" @click="updateDialogFn(scope.row)">修改</el-button>
                  <el-button type="danger" size="mini" @click="deleteCate(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeFn"
      >
      <!-- 添加的表单 -->
      <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="addForm.cate_name" minlength="1" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="addForm.cate_alias" minlength="1" maxlength="15"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {getCateListAPI,saveCateAPI,updateCateAPI,delCateAPI} from "@/api"
  export default{
    name:"ArtCate",
    created() {
      this.getCateListFn()
    },
    data(){
      return{
        cateList:[],
        dialogVisible:false,
          addForm: { // 添加表单的数据对象
                cate_name: '',
                cate_alias: ''
              },
          addRules: { // 添加表单的验证规则对象
                cate_name: [
                  { required: true, message: '请输入分类名称', trigger: 'blur' },
                  { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
                ],
                cate_alias: [
                  { required: true, message: '请输入分类别名', trigger: 'blur' },
                  { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
                ]
            },
            isEdit:false,//默认为新增状态
            editId:""
      }
    },
    methods:{
      async getCateListFn(){
          const {data:res}=await getCateListAPI()
          this.cateList=res.data
      },
      //显示对话框
      showAddDialogFn(){
        this.dialogVisible=true
        this.isEdit=false
        this.editId=""
      },
      cancleFn(){
        this.dialogVisible=false
      },
      confirmFn(){
        //关闭对话框
        this.dialogVisible=false
        //js兜底检验
        this.$refs.addRef.validate(async (valied)=>{
          if(valied){
            if(this.isEdit){
              //修改
              const {data:res}=await updateCateAPI({id:this.editId,...this.addForm})
              if(res.code!==0) return this.$message.error(res.message) //分类信息更新失败
              this.$message.success(res.message)
            }else{
                //新增
                const {data:res}=await saveCateAPI(this.addForm)
                if(res.code===0){//新增成功
                  this.$message.success("新增分类成功!")
                }else{
                  return this.$message.error("新增分类失败!")
                }
            }
            this.getCateListFn()
          }else{
            return false //检验不通过
          }
        })
      },
      closeFn(){
        this.$refs.addRef.resetFields()
      },
      updateDialogFn(obj){
        this.dialogVisible=true
        this.isEdit=true
        this.editId=obj.id
        //先加载完dom,之后在填充数据
        this.$nextTick(()=>{
          this.addForm.cate_name=obj.cate_name
          this.addForm.cate_alias=obj.cate_alias
        })
      },
      deleteCate(obj){
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(async () => {
                  //确定删除
                  const {data:res}=await delCateAPI(obj.id)
                  if(res.code!==0)  return this.$message.error("删除失败")
                  this.getCateListFn()
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });
                });
      }
    }
  }
</script>

<style scoped lang="less">
    .header-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
</style>
